<template>
	<view class="u-p-20">
		<view class="u-border u-p-20" @click="getDetail">
			<w-home-item title="用户姓名" :value="item.name"></w-home-item>
			<u-gap height="5" bg-color="#ffffff"></u-gap>
			<w-home-item title="用户电话" :value="item.mobile"></w-home-item>
			<u-gap height="5" bg-color="#ffffff"></u-gap>
			<w-home-item title="报修问题" :value="item.content"></w-home-item>
			<u-gap height="5" bg-color="#ffffff"></u-gap>
			<w-home-item title="报修状态" :value="item.stateName"></w-home-item>
		</view>
		<u-popup v-model="show" mode="center" closeable border-radius='8' width='75%'>
			<view class="u-p-40">
				<view class="">
					照片：<text v-if="!item.photo">未上传</text>
				</view>
				<u-image v-if='item.photo' width="100%" height="300rpx" mode='aspectFit' :src="item.photo"
					@click='previewImage(item.photo)'></u-image>
				<view class="u-m-t-5">
					姓名：{{item.name}}
				</view>
				<view class="u-m-t-5">
					电话：{{item.mobile}}
				</view>
				<view class="u-m-t-5">
					报修问题：{{item.content}}
				</view>
				<view class="u-m-t-5">
					报修状态：{{item.stateName}}
				</view>
				<view class="u-m-t-5">
					申请时间：{{item.createDate}}
				</view>
				<view class="u-flex u-row-around u-m-t-20">
					<u-button type="error" size="medium" @click="del">删除</u-button>
					<u-button v-if='item.stateName=="未派单"' type="primary" size="medium" @click="change">修改</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		name: "w-repair-list",
		props: {
			item: {
				type: Object,
				default: () => {
					return {}
				}
			},
			index: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				show: false
			};
		},
		methods: {
			getDetail() {
				this.$store.commit('setItemInfo',this.item)
				this.show = true
			},
			previewImage(photo) {
				uni.previewImage({
					urls: [photo],
				});
			},
			del() {
				uni.showModal({
					title: '提示',
					content: '确定要删除此条报修单？',
					success: (res) => {
						if (res.confirm) {
							this.show = false
							this.$emit('delect', this.item.id, this.index)
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			change() {
				this.$u.route({
					url: '/pages/index/repair/repair',
					params: {
						id: this.item.id
					}
				})
			}
		},
	}
</script>

<style>
	.u-border:after {
		border-radius: 30rpx;
	}
</style>
